<template>
  <div class="app-container">

    <el-form
      ref="form"
      :model="form"
      label-width="120px"
    >
      <el-form-item label="Title">
        <el-input v-model="form.title" />
      </el-form-item>

      <el-form-item label="CoverImgUrl">
        <el-input v-model="form.coverImgUrl" />
      </el-form-item>

      <el-form-item label="Topic">
        <el-select
          @change="selectChanged"
          v-model="form.topic"
          placeholder="please select topic"
        >
          <el-option
            v-for="item in form.topics"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="Posted Time">
        <el-col :span="11">
          <el-date-picker
            v-model="form.postDate"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="Pick a date"
            style="width: 100%;"
          />
        </el-col>
      </el-form-item>

      <el-form-item label="Summary">
        <el-card style="height: 610px;">
          <quill-editor
            v-model="form.summary"
            ref="myQuillEditor"
            style="height: 500px;"
            :options="editorOption"
          >
          </quill-editor>
        </el-card>
      </el-form-item>

      <el-form-item label="Content">
        <el-card style="height: 610px;">
          <quill-editor
            v-model="form.content"
            ref="myQuillEditor"
            style="height: 500px;"
            :options="editorOption"
          >
          </quill-editor>
        </el-card>
      </el-form-item>

      <el-form-item label="IsActive">
        <el-switch
          v-model="form.articleStatus"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>

      <!-- <el-form-item label="Activity type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="Online activities" name="type" />
          <el-checkbox label="Promotion activities" name="type" />
          <el-checkbox label="Offline activities" name="type" />
          <el-checkbox label="Simple brand exposure" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources">
        <el-radio-group v-model="form.resource">
          <el-radio label="Sponsor" />
          <el-radio label="Venue" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Activity form">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >Create</el-button>
        <el-button @click="onCancel">Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  data() {
    return {
      form: {
        title: "",
        postDate: "",
        topic: "",
        topics: [],
        summary: "",
        content: "",
        coverImgUrl: "",
        articleStatus: "",
        topicId: ""
      },
      topicArray: [],
      editorOption: {}
    };
  },
  components: {
    quillEditor
  },
  created: function() {
    this.initTopic();
  },
  methods: {
    onSubmit() {
      //topic处理
      if (this.topicArray) {
        for (var a in this.topicArray) {
          if (this.topicArray[a].topic == this.form.topic) {
            this.form.topicId = this.topicArray[a].id;
          }
        }
      }
      this.outputObj(this.form);

      //扔数据
      let parms = this.form;
      var self = this;
      this.$post("/addArticle", parms)
        .then(res => {
          this.$message("submit successfully !");
        })
        .catch(() => {
          this.$message("submit failure !");
        });
    },
    onCancel() {
      this.$message({
        message: "cancel!",
        type: "warning"
      });
    },
    selectChanged(value) {
      console.log(value);
    },
    initTopic() {
      let parms = {};
      var self = this;
      this.$get("/queryTopic", parms)
        .then(res => {
          self.form.topics = res.data.map(v => v.topic);
          self.topicArray = res.data;
          console.log(self.form.topics);
        })
        .catch(() => {});
    },
    outputObj(obj) {
      var description = "";
      for (var i in obj) {
        description += i + " = " + obj[i] + "\n";
      }
      console.log(description);
    }
  }
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>
